<template>
	<view style="margin-left: 10px;margin-right: 10px;">
		<u-scroll-list :indicator="indicator">
			<view v-for="(item, idx) in vodList" :key="idx" style="margin-right: 10px;">
				<view class="vod" @click="toDetail(item)">
					<image class="cover" :src="item.vodPic"></image>
					<view class="renew">{{item.vodRemarks}}</view>
					<view class="title">{{item.vodName}}</view>
				</view>
			</view>
			<view class="more-bg">
				<view class="more-mg" @click="toPage('pages/history/history')">
					<view>
						<image class="more-img" src="../../static/more.png">
						</image>
					</view>
					<view class="more-font">查看全部</view>
				</view>
			</view>
		</u-scroll-list>
	</view>
</template>

<script>

	export default {
		props: {
			vodList: {}
		},
		data() {
			return {
				indicator: false,
			}
		},

		methods: {
			toDetail(item) {
				if(uni.getStorageSync('playerSet') == 1){
					uni.$u.route({
						url: 'pages/dplayer/dplayer',
						params: {
						vodInfo: encodeURIComponent(JSON.stringify(item))
						}
					})
				}else{
					uni.$u.route({
						url: 'pages/detail/detail',
						params: {
						vodInfo: encodeURIComponent(JSON.stringify(item))
						}
					})
				}
			},
			toPage(url) {
				uni.$u.route({
					url: url,
					params: {
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.vod {
		width: 104px;
		height: 180px;
	}

	.more-bg {
		background-color: #FFFFFF;
		width: 100px;
		height: 140px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.more-mg {
		width: 80px;
		height: 130px;
		display: flex;
		flex-flow: column;
		justify-content: center;
		align-items: center;
		margin-top: 10px;
		background-color: #D8D8D8;
		padding: 5px;
	}

	.more-img {
		width: 25px;
		height: 25px;
	}

	.more-font {

		color: #8a8a8a;
		font-size: 10px;
		justify-content: center;
	}

	.cover {
		padding-right: 10px;
		width: 105px;
		height: 150px;
		border-radius: 5px;
		position: relative;
	}

	.renew {
		position: relative;
		top: -30px;
		color: #ffffff;
		font-size: 10px;
		text-align: right;
		padding-left: 5rpx;
		right: 5rpx;
		width: 100px;
		
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.title {
		position: relative;
		padding-left: 5px;
		padding-right: 5px;
		font-size: 14px;
		top: -10px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
</style>
